import React, { useState, useEffect } from 'react';
import QRCode from 'react-qr-code';
import PropTypes from 'prop-types';
import './index.less';
import { CODE_TYPE_OBJ, CODE_TYPE_OBJ_TEXT } from '../../../../enum';

const QRCodeComponent = ({ timestamp, status }) => {
    const [qrcodeText, setQrcodeText] = useState('');

    useEffect(() => {
        const statusKey = Object.keys(CODE_TYPE_OBJ).find(key => CODE_TYPE_OBJ[key] === status);
        const statusDescription = statusKey ? CODE_TYPE_OBJ[statusKey] : '未知状态';

        const updatedText = `${timestamp} | ${statusDescription}`;
        setQrcodeText(updatedText);
    }, [timestamp, status]);

    return (
        <div className="qr-code">
            <QRCode value={qrcodeText} className="qr-code__qrcode" />
        </div>
    );
};


QRCodeComponent.propTypes = {
    timestamp: PropTypes.number.isRequired,
    status: PropTypes.number.isRequired,
};

export default QRCodeComponent;